<template>
  <view class="padding-lr-30">
    <l-background has-sub-background />
    <view class="padding-tb-20">
      <text class="text-42 color-white text-bold">{{ detail.statusLabel }}{{ detail.status ? '' : '...' }}</text>
    </view>
    <view class="card padding-30">
      <l-title title="费用信息" />
      <view class="margin-top-30">
        <order-info-item label="类型" :value="detail.type ? '收入' : '支出'" />
        <order-info-item v-for="(item,index) in detail.amountInfoList" :key="index" :label="item.summary" :value="item.amount+'元'" />
        <order-info-item label="支付方式" :value="detail.paymentMethodLabel" />
        <order-info-item label="支付时间" :value="detail.paymentDate" />
        <order-info-item label="是否开票" :value="detail.invoice ? (detail.invoice ? '未开发票' : '无需发票') : '已开发票'" />
        <order-info-item label="备注" :value="detail.remarks || '暂无'" />
      </view>
      <!-- <scroll-view v-if="detail.screenshotUrl" style="height: 200rpx;white-space: nowrap" :scroll-x="true">
		  <image v-for="(item, index) in imageList" mode="center" class="image margin-top-10 block" :src="item" @click="viewImage(index)" />
		<!-- <view class="flex-row">
		  <image v-for="(item, index) in imageList" class="image margin-top-10 block" :src="item" @click="viewImage(index)" />
		</view>
      </scroll-view> -->
	  <view class="flex-row imageBox">
	    <image v-for="(item, index) in imageList" class="image margin-top-10 block" mode="center" :src="item" @click="viewImage(index)" />
	  </view>
    </view>
    <view class="step-box">
      <view v-for="(item,index) in detail.approvalInfoList" :key="index" class="flex-row relative margin-bottom-20 step-item-box">
        <image :src="`https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_yuan${item.approvalStatus === 5 ? 2 : 1}.png`" class="quan" />
        <view class="triangle" />
        <view class="step-item">
          <view class="flex-row justify-between align-center">
            <text class="text-30 color-t1">{{ item.approvalUserName }}</text>
            <text v-if="item.approvalStatus === 5" class="text-30" :style="{color:color(item.approvalStatus)}">{{ item.approvalStatusLabel }}</text>
            <text v-else class="text-24 color-t3">{{ item.approvalTime }}</text>
          </view>
          <view v-if="item.approvalStatus !== 5" class="flex-row align-center justify-between margin-top-10">
            <text class="text-24 color-t3 remark" :style="{opacity: item.approvalRemarks ? 1 : 0}">备注：{{ item.approvalRemarks }}</text>
            <text class="text-30 remarkFlg" :style="{color:color(item.approvalStatus)}">{{ item.approvalStatusLabel }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import OrderInfoItem from '../components/order-info-item/order-info-item'
import colors from '@/common/colors'
import { viewImage } from '@/common/util'
import { pageExpenditureBalanceDetail } from '../api'
export default {
  name: 'FeeDetail',
  components: {
    OrderInfoItem
  },
  data() {
    return {
      id: '',
      approvalName: '',
      detail: {},
      imageList: []
    }
  },
  computed: {
    color() {
      return (status) => {
        switch (status) {
          case 0:
            return colors.colorSecondary
          case 1:
            return colors.colorPrimary
          case 2:
            return colors.colorSuccess
          case 3:
            return colors.colorError
          case 4:
            return colors.fontcolorT3
          case 5:
            return colors.colorSuccess
        }
      }
    }
  },
  onLoad(e) {
    this.id = e.id
    this.approvalName = e.approvalName
    this.getDetail()
  },
  methods: {
    viewImage(i) {
      viewImage(i, this.imageList)
    },
    async getDetail() {
      const [err, res] = await pageExpenditureBalanceDetail({ id: this.id })
      if (!this.$http.errorCheck(err, res)) return false
      this.detail = res.data.data
      this.imageList = this.detail.screenshotUrl.split(',')
      if (!this.detail.status) {
        this.detail.approvalInfoList.unshift({
          createTime: this.detail.updateTime,
          approvalUserName: this.approvalName,
          approvalStatusLabel: '待审批',
          approvalStatus: 5
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.card{
  border-radius:20rpx;
}
.sub-card{
  background:#F7F7F7;
}
.imageBox {
	flex-flow: row wrap;
	.image{
	  flex: 0 0 31%;
	  height: 197rpx;
	  margin-right: calc(10% / 3);
	  margin-bottom: 16rpx;
	  border-radius:$radius-default;
	}
	.image:nth-child(3n){
	  margin-right:0;
	}
}

.step-box{
  padding-top:30rpx;
  margin-left:66rpx;
  border-left:2rpx solid $color-border;
  .remark {
	  width: 52vw;
  }
  .remarkFlg {
	  align-self: start;
  }
}
.step-item-box:last-child{
  margin:0;
}
.quan{
  width:28rpx;
  height:28rpx;
  position:absolute;
  top:26rpx;
  left:-14rpx;
}
.triangle{
  width:0;
  height:0;
  margin-top:26rpx;
  border-left:18rpx solid rgba(0,0,0,0);
  border-right:18rpx solid #fff;
  border-top:14rpx solid rgba(0,0,0,0);
  border-bottom:14rpx solid rgba(0,0,0,0);
}
.step-item{
  width: 578rpx;
  background: #FFFFFF;
  padding:20rpx 35rpx;
  border-radius: 20rpx;
}
</style>
